<template>
    <div class="customer-file-fill-in">
        <c-title text="填写资料"></c-title>
        <div class="box" style="margin-bottom: .625rem;">
            <van-cell-group>
                <van-field required v-model="name" label="姓名" placeholder="姓名" />
                <van-field v-model="mobile" label="手机号" placeholder="手机号" />
            </van-cell-group>
        </div>
        <template v-for="(item, index) in form">
            <div class="box" :key="index">
                <div class="box-text" @click="handle_delete(index)">删除</div>
                <van-cell-group>
                    <template v-for="c_item in item.data">
                        <van-field type='textarea' autosize rows='1' v-if="c_item.field == 'remark'" 
                            v-model=" c_item.value" :label="c_item.label" :placeholder="c_item.placeholder" />
                        <van-field v-else-if="c_item.field !== 'upload'" v-model="c_item.value" :label="c_item.label"
                            :placeholder="c_item.placeholder" />
                        <div class="photo" v-else>
                            <div class="text">图片</div>
                            <div class="flex-a-c">
                                <van-uploader v-model="c_item.fileList"
                                    :after-read="(e, flag) => multipleMethod_1(e, flag, index)"
                                    :before-delete="(e, flag) => multiple_delete(e, flag, index)" multiple
                                    :max-count="9">
                                    <div class="diy-uploader-css">
                                        <van-icon name="plus" />
                                    </div>
                                </van-uploader>
                            </div>
                        </div>
                    </template>


                </van-cell-group>

            </div>
        </template>
        <div class="add">
            <div @click="handle"><van-icon name="plus" />新增服务项目</div>
        </div>
        <div class="button" :class="{ 'w375': fun.isPc() }">
            <button @click="handle_submit">保存</button>
        </div>
    </div>
</template>

<script>
import { Toast } from "vant";
export default {
    data() {
        return {
            mobile: "",
            name: "",
            form: [],
            timerId: null
        };
    },
    activated() {
        this.timerId = null;
        this.mobile = '';
        this.name = '';
        this.form = [
            {
                operation: { txt: "删除" },
                data: [
                    { field: 'name', label: "项目", placeholder: "请输入项目名称", value: "" },
                    { field: 'teacher_name', label: "操作老师", placeholder: "请输入姓名", value: "" },
                    { field: 'price', label: "价格", placeholder: "请输入价格", value: "" },
                    { field: "remark", label: "备注", placeholder: "请输入备注", value: "" },
                    { field: 'upload', label: "图片", fileList: [], image_list: [] }
                ]
            }
        ]
    }, deactivated() {
        if (this.timerId) {
            clearTimeout(this.timerId);
        }
        this.timerId = null;
    },

    methods: {
        multiple_delete(e, flag, index) {
            console.log(e, flag, index);
            this.form[index]?.data[4]?.image_list.splice(flag.index, 1);

            return true;
        },
        multipleMethod_1(e, flag, index) {
            if (e && e.length) {
                for (let i = 0; i < e.length; i++) {
                    this.onRead_1(e[i], flag, index);
                }
            } else {
                this.onRead_1(e, flag, index);
            }
        },
        onRead_1(e, flag, index) {
            Toast.loading({
                message: '上传中',
                forbidClick: true,
            });
            let fd = new FormData();
            if (flag === true) {
                fd.append("file", e);
            } else {
                fd.append("file", e.file); // 第一个参数字符串可以填任意命名，第二个根据对象属性来找到file
            }
            axios
                .post(this.fun.getRealUrl("upload.uploadPic"), fd, {
                    headers: { "Content-Type": "multipart/form-data" }
                })
                .then(response => {
                    var responseData = response.data;
                    if (responseData.result === 1) {
                        this.form[index]?.data[4]?.image_list.push(responseData.data.img_url);
                        Toast.clear();
                    } else {
                        Toast(responseData.msg);
                        Toast.clear();
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        handle_delete(index) {
            this.form.splice(index, 1);
        },
        handle() {
            let copy_data = [
                {
                    operation: { txt: "删除" },
                    data: [
                        { field: 'name', label: "项目", placeholder: "请输入项目名称", value: "" },
                        { field: 'teacher_name', label: "操作老师", placeholder: "请输入姓名", value: "" },
                        { field: 'price', label: "价格", placeholder: "请输入价格", value: "" },
                        { field: "remark", label: "备注", placeholder: "请输入备注", value: "" },
                        { field: 'upload', label: "图片", fileList: [], image_list: [] }
                    ]
                }
            ];
            this.form = this.form.concat(copy_data);
        },
        async handle_submit() {
            let project_list = []
            this.form.forEach((item, index) => {
                project_list[index] = {};
                item.data.forEach(_item => {
                    if (_item.field == 'upload') {
                        project_list[index]['image_list'] = _item.image_list;
                    } else {
                        project_list[index][_item.field] = _item.value;
                    }
                })
            })
            let json = {
                form: {
                    name: this.name,
                    mobile: this.mobile,
                    project_list: project_list
                }
            }

            let { result, msg } = await $http.post("plugin.customer-archive.frontend.customer-archive.add-customer", json, '.');

            this.$toast(msg);
            if (result) {
                this.timerId = setTimeout(() => {
                    this.$router.go(-1);
                }, 500);

            }
        },
    }
};
</script>

<style scoped lang='scss'>
.w375 {
    width: 375px !important;
    left: 50% !important;
    transform: translateX(-50%);
}
::v-deep .van-uploader__wrapper{
    display: grid;
    grid-template-columns: auto auto auto;
    grid-column-gap:.625rem;
}

::v-deep .van-cell-group {
    border-radius: .5rem;
    overflow: hidden;
}

::v-deep .van-uploader__input-wrapper {
    width: unset;
    margin: 0;
}

::v-deep .van-field__label {
    font-weight: 500;
    font-size: .875rem;
    color: #00001C;
}

::v-deep .van-uploader {
    width: 100%;
}

::v-deep .van-uploader__input {
    width: 6rem;
    height: 6rem;
}

::v-deep .van-uploader__preview {
    margin: .4688rem 0
}

::v-deep .van-uploader__preview-image {
    width: 6rem;
    height: 6rem;
    border-radius: .5rem;
}

::v-deep .van-cell {
    padding: 10px .75rem;
}

.diy-uploader-css ::v-deep .van-icon {
    color: #D6D6DC;
    font-size: 1.4063rem;
}

.customer-file-fill-in {
    padding-bottom: 6.0938rem;

    .add {
        margin-top: 1.5625rem;
        color: var(--themeBaseColor);
        font-weight: 500;
        font-size: .875rem;
        text-align: center;
    }

    .add .van-icon {
        margin-right: .3125rem;
    }

    .photo {
        padding: 0 .75rem;
        margin-bottom: .9688rem;
    }

    .diy-uploader-css {
        width: 6rem;
        height: 6rem;
        background: #F8F8F8;
        border-radius: .5rem .5rem .5rem .5rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .text {
        margin-bottom: .75rem;
        margin-top: 1.2188rem;
        text-align: left;
        font-weight: 500;
        font-size: .875rem;
        color: #00001C;
    }

    .box-text {
        font-weight: 500;
        font-size: .875rem;
        color: var(--themeBaseColor);
        line-height: 1;
        text-align: right;
        margin-bottom: .5313rem;
    }

    .box {
        padding: .625rem .75rem;
    }

    .button {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: 3.75rem;
        display: flex;
        align-items: center;
        padding: 0 .75rem;
        background: #FFFFFF;
        box-shadow: 0rem -0.0313rem .3125rem .0313rem #F5F5F5;
        border-radius: 0rem 0rem 0rem 0rem;

        button {
            display: block;
            width: 100%;
            height: 2.5rem;
            background: var(--themeBaseColor);
            border-radius: 1.2813rem;
            font-weight: 500;
            font-size: .9375rem;
            color: #FFFFFF;
            border: none;
        }
    }
}

/** **/
</style>